<template>
  <div class="layout">
    <el-form 
     label-position="left" label-width="auto" class="zw-table-search"
      ref="formRef" :model="form">
     <el-row :gutter="20">
        <!-- 搜索 -->
        <el-col :span="8">
          <el-form-item label="文件搜索">
            <el-input v-model="form.keyword" class="search_item" placeholder="请输入标题进行查找"  clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- 选择部门人员 -->
        <el-col :span="8">
          <el-form-item label="创建者">
            <el-select popper-class="zw-hide_select_option" v-model="form.user_id" placeholder="全部" multiple @click="openDepart">
              <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 上传时间 -->
        <el-col :span="8">
          <el-form-item label="上传时间">
            <el-date-picker :editable="false" value-format="YYYY-MM-DD HH:mm:ss" v-model="form.creat_time" type="datetimerange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="文件类型">
            <el-select class="search_item" v-model="form.type" placeholder="全部类型" @change="demo">
              <el-option v-for="item in typeDiff" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 标签筛选 -->
        <el-col :span="8" v-if="type != 8">
          <el-form-item label="标签筛选">
            <el-select popper-class="zw-hide_select_option" v-model="form.tag_list" placeholder="请选择标签" multiple @click="selecTag" @change="changeTag">
              <el-option v-for="item in AllTags" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
            <el-button @click="resetForm(formRef)">清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
    <!-- 标签弹框 -->
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  import type { ElForm } from 'element-plus'

  type FormInstance = InstanceType<typeof ElForm>
  import ZWDepart from '@/components/ZWDepart.vue'
  import ZWSelectTag from '@/components/ZWSelectTag.vue'
  import { getSetionId } from '@/utils/utils'
  const searchSelectRef = ref(null)
  const emit = defineEmits(['submit'])

  import { useStore } from '@/store'
  const store = useStore()

  const selecDialogRef = ref(null)
  const formRef = ref<FormInstance>()
  const demo = (data: any) => {
    console.log(data)
  }
  const tags = ref([])
  const users = ref([])
  // 选择标签options
  const AllTags = ref([])
  // 创建人options
  const creators = ref([])
  const DepartRef = ref(null)
  // 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用
  const type = computed(() => {
    return store.getters['content/type']
  })

  const departInfo = computed(() => {
    return store.getters['content/depart']
  })
  const typeDiff = reactive([
    { value: '-1', name: `全部类型` },
    { value: '0', name: `普通文件` },
    { value: '1', name: `雷达文件`}
  ])
  const form = reactive({
    keyword: '',
    user_id: users,
    start_time: '',
    end_time: '',
    tag_list: [],
    creat_time:[],
  })
  //打开新建选择人
  const openDepart = () => {
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = creators.value
  }
  // 打开选择标签
  const selecTag = () => {
    searchSelectRef.value.showCreatTag = true
    searchSelectRef.value.appDialog.visible = true
    searchSelectRef.value.selectTags = AllTags.value
  }
  // 获取标签
  const getTags = (data: any) => {
    AllTags.value = data
    form.tag_list = getSetionId('id', data)
  }
  //
  const changeTag = (data: any) => {
    let arr: any[] = AllTags.value.filter((item: any) => data.includes(item.id))
    form.tag_list = getSetionId('id', arr)
    AllTags.value = arr
  }
  // 提交查询
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (!valid) return
      form.start_time = form.creat_time[0]
      form.end_time = form.creat_time[1]
      emit('submit', form)
    })
  }
  //重置
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    form.keyword = ''
    form.user_id = []
    form.start_time = ''
    form.end_time = ''
    form.tag_list = []
    form.creat_time=[]
    emit('submit', form)
  }

  // 部门人员信息
  watch(departInfo, (depart) => {
    creators.value = depart.creaters
    users.value = getSetionId('id', depart.creaters)
  })
</script>
<style lang="scss">
  @import '../../../components/search.scss';
</style>
